<template>
  <div
    class="page"
    style="background-color: #f2f2f2; height: 100%; padding-top: 10px"
  >
    <CellGroup inset>
      <Field
        v-model="message"
        rows="5"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入备注"
        @input="onChange"
      />
    </CellGroup>
    <div class="grid-panel">
      <Tag
        plain
        type="primary"
        size="large"
        v-for="(item, index) in fastMessage"
        :key="item"
        @click="addMessage(item)"
        >{{ item }}</Tag
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { notNull } from "@/utils";
import { getCookie, setCookie } from "@/utils/auth";
import enums from "@/utils/enums";
import { Field, CellGroup, Tag } from "vant";
import { onMounted, ref } from "vue";
const message = ref();
const fastMessage = [
  "不吃葱",
  "不吃蒜",
  "不吃香菜",
  "不吃芹菜",
  "麻烦多压点米饭",
  "谢谢老板",
  "祝老板生意兴隆",
];

onMounted(() => {
  message.value = notNull(getCookie(enums.cookie.order.remark))
    ? getCookie(enums.cookie.order.remark)
    : "";
});

const addMessage = (text: string) => {
  message.value += " " + text;
  onChange();
};

/**编辑备注时 */
const onChange = () => {
  setCookie(enums.cookie.order.remark, message.value);
};
</script>
<style lang="less" scoped>
.grid-panel {
  display: grid;
  padding: 20px;
  align-items: start;
  justify-items: start;
  justify-content: start;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
</style>
